<template>
  <el-dialog
    v-model="props.modelValue"
    width="50%"
    :show-close="false"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4
          :id="titleId"
          :class="titleClass"
        >
          {{ t('organizationStructure.Upgrades.t1') }}
        </h4>
        <img
          src="@/assets/img/icon_guanbi.png"
          @click="close"
          class="close"
        />
      </div>
    </template>

    <div class="main">
      <el-row>
        <el-col
          :span="24"
          class="item"
        >
          <h2>标题</h2>
          <p>Member benefits: Cost:</p>
          <p>Member benefits: Cost:</p>
          <span>For more currencies, please contact customer service</span>
        </el-col>
        <el-col
          :span="24"
          class="item"
        >
          <h2>标题</h2>
          <p>Member benefits: Cost:</p>
          <p>Member benefits: Cost:</p>
          <span>For more currencies, please contact customer service</span>
        </el-col>
      </el-row>
      <el-row
        type="flex"
        justify="space-between"
      >
        <el-col
          :span="7"
          class="descriptions-item"
        >
          <el-descriptions
            class="margin-top"
            :column="0"
            style="background: red"
          >
            <el-descriptions-item
              label="用户名"
              :span="24"
              >kooriookami</el-descriptions-item
            >
            <el-descriptions-item
              label="手机号"
              :span="24"
              >18100000000</el-descriptions-item
            >
            <el-descriptions-item
              label="居住地"
              :span="24"
              >苏州市</el-descriptions-item
            >
          </el-descriptions>
        </el-col>
        <el-col
          :span="16"
          class="pay-style"
        >
          <h2>标题</h2>
          <div class="pay-type">
            <span> Alipay collection code </span>
            <img
              src="@/assets/img/f1.png"
              alt=""
            />
            <span> Alipay collection code </span>
            <img
              src="@/assets/img/f1.png"
              alt=""
            />
          </div>
        </el-col>
      </el-row>

      <el-form
        class="mt-3"
        :model="formData"
        :rules="rules"
        ref="formEl"
      >
        <el-row>
          <el-col
            :span="18"
            :offset="3"
          >
            <el-form-item prop="serialNumber">
              <el-input
                style="height: 47px"
                v-model="formData.serialNumber"
                :placeholder="t('organizationStructure.Upgrades.p1')"
                :maxlength="100"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col
            :span="18"
            :offset="3"
          >
            <el-form-item prop="paymentMethod">
              <el-input
                style="height: 47px"
                v-model="formData.paymentMethod"
                :placeholder="t('organizationStructure.Upgrades.p2')"
                :maxlength="100"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col
            :span="18"
            :offset="3"
          >
            <el-form-item prop="paymentFees">
              <el-input
                style="height: 47px"
                v-model="formData.paymentFees"
                :placeholder="t('organizationStructure.Upgrades.p3')"
                :maxlength="100"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col
            :span="18"
            :offset="3"
          >
            <el-form-item prop="remark">
              <el-input
                style="height: 47px"
                v-model="formData.remark"
                :placeholder="t('organizationStructure.Upgrades.p4')"
                :maxlength="100"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col
            :span="18"
            :offset="3"
          >
            <el-form-item prop="currency">
              <el-input
                style="height: 47px"
                v-model="formData.currency"
                :placeholder="t('organizationStructure.Upgrades.p5')"
                :maxlength="100"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col
            :span="18"
            :offset="3"
          >
            <el-form-item prop="voucher">
              <Uploads
                ref="upload1"
                @change="setFileList"
                :listType="'picture-card'"
              >
                <div>{{ t('organizationStructure.Upgrades.p6') }}</div>
              </Uploads>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        type="primary"
        @click="submitFn"
      >
        {{ t('submit') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { uploads } from '@/service/common.js'
import { upgradeService } from '@/service/organizationStructure'
import Uploads from '@/components/Uploads.vue'
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()

const router = useRouter()
const route = useRoute()

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits('update:modelValue')

const handleClose = () => {
  emit('update:modelValue', false)
}
const close = () => {
  emit('update:modelValue', false)
}

const formEl = ref(null)
const formData = ref({})

const validator = {
  voucher: (rule, value, callback) => {
    if (!fileList.value.length) {
      return callback(new Error(t('upload_p')))
    }
    callback()
  }
}
const rules = ref({
  serialNumber: [{ required: true, message: t('input_p'), trigger: 'change' }],
  paymentMethod: [{ required: true, message: t('input_p'), trigger: 'change' }],
  paymentFees: [{ required: true, message: t('input_p'), trigger: 'change' }],
  remark: [{ required: true, message: t('input_p'), trigger: 'change' }],
  currency: [{ required: true, message: t('input_p'), trigger: 'change' }],
  voucher: [{ required: true, type: 'array', validator: validator.voucher, trigger: ['change', 'blur'] }]
})

const fileList = ref([])
const upload1 = ref(null)
const setFileList = (val) => {
  fileList.value = val
  formEl.value.clearValidate('voucher')
}
const handleUpload = (ref, list) => {
  return new Promise((resolve, reject) => {
    const newList = list.value.filter((item) => item.raw)
    const oldList = list.value.filter((item) => !item.raw).map((item) => item.url)

    if (newList.length) {
      const formData = new FormData()
      newList.forEach((item) => {
        formData.append('files', item.raw)
      })
      uploads(formData).then(({ urls }) => {
        const resultFile = urls.split(',')
        list.value = resultFile.map((item) => {
          return {
            name: item.slice(item.lastIndexOf('/') + 1),
            url: item
          }
        })
        // ref.value.setFileList(list)
        resolve([...oldList, ...resultFile])
      })
    } else {
      resolve(oldList)
    }
  })
}

// 提交
const submitFn = async () => {
  if (!formEl.value) return
  formEl.value.validate(async (valid, fields) => {
    if (valid) {
      const voucher = await handleUpload(upload1, fileList)

      const params = {
        ...formData.value,
        voucher: voucher?.join(',')
      }

      upgradeService(params).then(({ msg }) => {
        ElMessage.success(msg)
        close()
      })
    }
  })
}
</script>

<style scoped lang="scss">
// .main {
//   height: calc(100vh - 400px);
//   overflow: auto;
// }
.item {
  width: 100%;
  height: 100px;
  background: #eaebec;
  padding: 17px 24px;
  margin-bottom: 10px;
}

.descriptions-item {
  width: 100%;
  height: 120px;
  background: #eaebec;
  padding: 17px 24px;
  margin-bottom: 10px;

  :deep(.el-descriptions__cell) {
    background: #eaebec;
    padding-bottom: 4px !important;
  }
}

.pay-style {
  width: 102%;
  height: 120px;
  background: #eaebec;
  padding: 17px 24px;
  margin-bottom: 10px;

  img {
    width: 60px;
    height: 60px;
  }
}

.pay-type {
  width: 100%;
  display: flex;
  margin-top: 12px;
  justify-content: space-between;
}

.divider {
  width: 100%;
  height: 3px;
  background: black;
  margin-bottom: 36px;
}

.dialog-footer {
  button {
    min-width: 100px;
    padding: 0px 18px;
    background: black;
    border: 2px solid black;
    border-radius: 5px;
    margin-left: 40%;
    // &:nth-child(1) {
    //     margin-left: 40%;
    //     background: #fff;
    //     color: black;
    // }
  }
}
</style>
